<template>
  <div class="app-container">
    <el-tabs v-model="tenantCode" class="demo-tabs" @tab-change="changeTab">
      <el-tab-pane label="工厂" name="0"></el-tab-pane>
      <el-tab-pane label="商家" name="1"></el-tab-pane>
      <el-tab-pane label="物流" name="2"></el-tab-pane>
      <el-tab-pane label="私有工厂" name="3"></el-tab-pane>
      <el-tab-pane label="渠道" name="4"></el-tab-pane>
      <el-tab-pane label="代理商" name="5"></el-tab-pane>
    </el-tabs>
    <div class="content">   
      <div class="list">
        <div>
          <div class="round"></div>角色模板
        </div>
        <div :class="{ line: true, active: activeRole == index }" @click="changeActive(index)"
          v-for="item, index in list" :key="index">
          <el-input v-if="editRole == index" v-autoFocus v-model="currentEditName" />
          <div v-else class="name">{{ item.templateRoleName }}</div>
          <el-icon v-if="editRole == index">
            <Check @click="editRoleName(item)" />
          </el-icon>
          <el-icon v-else @click="edit(index, item)">
            <Edit />
          </el-icon>
          <el-popconfirm @confirm="del(item.templateRoleId)" width="200" :title="'确定要删除' + item.templateRoleName + '?'">
            <template #reference>
              <el-icon>
                <Delete />
              </el-icon>
            </template>
          </el-popconfirm>
        </div>
        <div class="add-btn" @click='visible = true'><el-icon>
            <Plus />
          </el-icon>新增</div>
      </div>
      <div class="permissions">
        <div class="tab">菜单权限</div>
        <el-tree ref="permissions" show-checkbox :data="data" node-key="id" @check="treeChange" />
      </div>
    </div>
    <el-dialog v-model="visible"   @close="closeModal" destroy-on-close title="添加角色" width="400" align-center >
      <el-form>
        <el-form-item label="角色名称">
          <el-input placeholder="请输入" v-model="addRoleForm.templateRoleName" />
        </el-form-item>
        <el-form-item label="是否可以删除/修改">
          <el-select v-model="addRoleForm.operateCode">
            <el-option label="不可删除、不可修改" value="0"></el-option>
            <el-option label="不可删除、可以修改" value="1"></el-option>
            <el-option label="可修改可删除" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否为超级管理员">
          <el-checkbox v-model="addRoleForm.isSuperAdmin" false-value="0" true-value="1" />
        </el-form-item>
        <el-form-item label="是否业务角色">
          <el-checkbox v-model="addRoleForm.isBusiness"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="addRoleItem">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Role">
import { onMounted, ref } from "vue";

import { permissTree, getRoleList, addRole, editRole as updateRole, delRole } from "@/api/permissions";

import { ElMessage } from 'element-plus';

const list = ref([])

const editRole = ref(null); // 编辑角色
const currentEditName = ref('')
const tenantCode = ref('0'); //租户类型code
const visible = ref(false);
const addRoleForm = ref({
  templateRoleName: '',
  operateCode: '2',
  isSuperAdmin: '',
  isBusiness: false
}); //添加角色的name
const activeRole = ref(0);// 当前选中的角色
const permissions = ref(); // 树型控件ref
// 初始化查询列表
const init = () => {
  getRoleList(tenantCode.value).then(res => {
    list.value = res.data;
    activeRole.value=0;
    permissions.value?.setCheckedKeys(res.data[0].menuIds);
  })
};
// 初始化权限树
const getPermissionsTree=()=>{
    permissTree(tenantCode.value).then(res => {
    data.value = res.data;
  })
}
// 切换租户类型
const changeTab = () => {
  init();
  getPermissionsTree()
}
// 关闭添加弹窗
const closeModal = () => {
  addRoleForm.value = {
    operateCode: '2',
    isSuperAdmin:'',
    isbBusiness: false
  };
}
// 切换修改状态
const edit = (index) => {
  editRole.value = index;
  currentEditName.value = list.value[index].templateRoleName;
}

// 切换选中角色
const changeActive = (index) => {
  activeRole.value = index;
  permissions.value?.setCheckedKeys(list.value[index].menuIds);
}
// 修改角色名
const editRoleName = (item) => {
  // 此处调用接口
  editRole.value = null;
  updateRole(item.templateRoleId, { ...item, templateRoleName: currentEditName.value }).then(() => {
    init();
    ElMessage({
      type: 'success',
      message: '操作成功！'
    })
  })
}
// 改变角色模板的权限
const treeChange = () => {
  const menuIds = permissions.value.getCheckedNodes().map(v => v.id);
  updateRole(list.value[activeRole.value].templateRoleId, { ...list.value[activeRole.value], menuIds }).then(() => {
    init();
    proxy.$modal.msgSuccess("操作成功！")
  })
}
// 删除角色
const del = (id) => {
  delRole(id).then(res => {
    init();
    ElMessage({
      type: 'success',
      message: '操作成功！'
    })
  })
}
// 添加角色
const addRoleItem = () => {
  // 此处调用接口
  addRole({ ...addRoleForm.value, typeCode: tenantCode.value }).then(res => {
    init();
    visible.value = false;
  })
}
// 角色树
const data = ref([
])
onMounted(() => {
  // 获取角色树
  getPermissionsTree()
  // 获取列表
  init();
  permissions.value?.setCheckedKeys(list.value[0]?.menuIds ? list.value[0].menuIds : [])
});
</script>
<style lang="scss" scoped>
.content {
  display: flex;

  >div {
    border-radius: 6px;
    height: 80vh;
    padding: 20px;
    box-sizing: border-box;
    border: 1px solid #F5F7FA;
  }

  .list {
    width: 300px;
    margin-right: 10px;
    position: relative;

    .round {
      background: #409EFF;
      border-radius: 50%;
      width: 10px;
      height: 10px;
      display: inline-block;
      margin-right: 10px;
    }

    .line {
      width: 100%;
      display: flex;
      gap: 10px;
      align-items: center;
      margin: 20px auto;
      font-size: 14px;
      height: 40px;
      padding: 0 10px;
      box-sizing: border-box;
      border: 1px solid transparent;

      .name {
        flex: 1;
        cursor: pointer;
      }
    }

    .active {
      background: #D9E8FF;
      border-radius: 0px 0px 0px 0px;
      border: 1px solid #007DFF;
    }

    .add-btn {
      width: 90%;
      height: 30px;
      line-height: 30px;
      color: white;
      background: #409EFF;
      border-radius: 6px;
      text-align: center;
      font-size: 14px;
      position: absolute;
      bottom: 10px;
      left: 5%;
    }
  }

  .permissions {
    flex: 1;
  }
}
</style>
